<template>
  <div style="width: 1200px; margin: 0 auto">
    <el-row>
      <el-col :span="6">
        <div style="display: inline-block;background: white;width: 400px; transform: scale(0.75);">
          <el-carousel height="350px">
            <el-carousel-item v-for="pic in skuList[0].pictures">
              <img :src="pic.url" alt="null"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="18">
        <div style="display:inline-block;width: 700px;padding-left: 50px">
          <p style="font-size: 30px">{{ skuList[0].title }}</p>
          <el-divider></el-divider>
          <p style="text-align: left">增值业务&nbsp&nbsp&nbsp&nbsp安全保障，放心购买</p>
          <p style="text-align: left">配送至：广东省佛山市禅城区祖庙街道tedu达内时代科技有限公司</p>
          <p style="text-align: left">
            套餐：
            <el-button-group>
              <el-button v-for="sku in skuList" @click="setCurrentSku(sku)">{{ sku.specifications.value }}</el-button>
            </el-button-group>
          </p>

          <p style="font-size: 20px;text-align: left;">
            价格：
            <b style="color: orange">￥{{ currentSku ? currentSku.discountPrice : '' }}</b> &nbsp; <s>{{ currentSku ? currentSku.originalPrice : '' }}</s>
          </p>

          <span style="float: left;">销量：0件</span>

          <span style="font-size: 18px">
      <el-button style="height: 50px;font-size: 30px"
                 @click="$router.push('/sys-user/product/cart')">&nbsp 购物车 &nbsp</el-button>
      </span>
        </div>
      </el-col>
    </el-row>
    <div class="tabs-container">
      <el-tabs class="tabs" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="商品介绍" name="商品介绍"></el-tab-pane>
        <el-tab-pane label="规格与包装" name="规格与包装"></el-tab-pane>
        <el-tab-pane label="售后保障" name="售后保障"></el-tab-pane>
        <el-tab-pane label="商品评价(200+)" name="商品评价"></el-tab-pane>
      </el-tabs>
    </div>
    <img src="/images/imgs/consumer_v20110621.jpg" id="商品介绍" style="width: 75%">
    <img src="/images/imgs/shopimgFile1673424223.jpg">
    <img src="/images/imgs/shopimgFile1640163291.jpg" id="规格与包装">
    <img src="/images/imgs/shopimgFile1640163292.jpg">
    <img src="/images/imgs/maomaoshouhou.jpg" id="售后保障">
    <img src="/images/imgs/maomaopinglun.png" id="商品评价">
  </div>
</template>

<script>
export default {
  name: "indexView",
  data() {
    return {
      currentSku: '',
      activeName: '',
      src: '',
      url: '',
      items: [
        'banner01.png',
        'banner02.png',
        'banner03.png'],
      checkList: ['选中且禁用', '单选框 A'],
      skuList: [],
      sku: {
        id: '',
        spuId: '',
        title: '',
        barCode: '',
        originalPrice: '',
        discountPrice: '',
        specifications: '',
        albumId: '',
        pictures: '',
        stock: '',
        stockThreshold: '',
        sales: '',
        commentCount: '',
        positiveCommentCount: '',
        sort: '',
        gmtCreate: '',
        gmtModified: '',
      }
    };

  },
  methods: {

    loadShoppingCart(){
      if (this.currentSku === null) {
        this.$confirm('请先选择商品套餐', '提示', {
          confirmButtonText: '确定',
          type: 'info',
        });
        return;
      }

      let cart = JSON.parse(localStorage.getItem('cart'));

      let url = 'http://localhost:14001/cartItem/add-new?shoppingCartId='+ cart.id +'&skuId='+ this.currentSku.id;
      console.log("url:"+url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$router.push('/sys-user/product/cart');
          console.log("跳转成功！！")
        }
      });

    },
    setCurrentSku(sku){
      this.currentSku = sku;
      console.log(this.currentSku)
    },

    handleClick(tab) {
      const anchor = tab.name; // 获取锚点名称

      // 使用原生 JavaScript 方法跳转到锚点位置
      document.getElementById(anchor).scrollIntoView();
    },
    // handleScroll() {
    //   // 获取浏览器窗口的滚动距离
    //   const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //
    //   // 判断滚动距离和选项卡外层容器的位置，设置对应的类名
    //   const tabsContainer = document.querySelector('.tabs-container');
    //   if (scrollTop > tabsContainer.offsetTop) {
    //     tabsContainer.classList.add('fixed');
    //   } else {
    //     tabsContainer.classList.remove('fixed');
    //   }
    // },
    //加载spuId
    loadSpuId() {
      this.sku.spuId = this.$route.query.spuId;
    },
    //加载商品详情
    loadProductDetail() {
      let url = 'http://localhost:14001/sku/list-by-spu?queryType=all&spuId=' + this.sku.spuId;
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          jsonResult = jsonResult.data.list
          this.skuList = jsonResult;
          for (let i = 0; i < this.skuList.length; i++) {
            this.skuList[i].pictures = JSON.parse(this.skuList[i].pictures)
            this.skuList[i].specifications = JSON.parse(this.skuList[i].specifications)
            for (let [key, value] of Object.entries(this.skuList[i].specifications)) {
              this.skuList[i].specifications.name = key;
              this.skuList[i].specifications.value = value;
            }
          }
          console.log(this.skuList[0])
        }
      });
    }
  },
  mounted() {
    this.loadSpuId();
    this.loadProductDetail();
    window.addEventListener('scroll', this.handleScroll);
    //const tabsContainer = document.querySelector('tabs-container');
  },
 beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
}
}
</script>

<style scoped>
.tabs {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;
}

.tabs-container.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
}

img {
  border: none;
  vertical-align: middle;
}

h1 {
  color: #e53;
  font-size: 20px;
  font-weight: normal;
}

h2 {
  color: #e53;
  font-size: 20px;
  font-weight: normal;
  float: left;
}


.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*轮播图开始*/
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

/*轮播图结束*/

#below_banner_img > a > img {
  float: left;
  background: #fff;
  width: 266px;
  height: 90px;
}

.menu_div {
  margin-top: -315px;
  width: 170px;
  height: 100px;
  margin-right: 3px;

}

.container_right_div {
  margin-top: -0px;
}

.menu_body {
  border: 1px solid darkgoldenrod;
  float: left;
  width: 200px;
  position: relative;
  display: inline-block;
  height: 82%;
}

.menu_body_div1 {
  position: absolute; /* 子级 div 设为绝对定位 */
  left: -50px; /* 将其左侧定位在父级 div 左侧 */
  top: 0;
  margin-bottom: 5px;
}

.menu_body_div2 {
  margin-bottom: 5px;
  position: absolute; /* 子级 div 设为绝对定位 */
  top: 25px;
}

.menu_body span {
  float: left;
  width: 55px;
  padding: 5px 0 0;
}

.menu_body a {
  color: #666;
}

/*设置图标颜色*/
.fa-dog {
  color: orange;
}

.fa-cat {
  color: orange;
}

.fa-dove {
  color: orange;
}

.fa-fish {
  color: orange;
}

.fa-mouse-pointer {
  color: orange;
}

.product_div {
  margin-top: 30px;
}

.product_div_a {
  float: right;
  color: #666;
}

.block {
  position: relative;
  right: 400px;
  top: 100px;
}
</style>
